<template>
  <div class="allLinePage">
    <div v-for="(item, index) in lines" :key="index" class="lineItem">
      <el-tag class="lineTag" :type="currentLine.lineNo == item.lineNo ? 'danger' : 'primary'"
        :effect="item.trainType == '' && currentLine.lineNo == item.lineNo || item.trainType !== '' && currentLine.trainType == item.trainType ? 'dark' : 'plain'"
        @click="selectLine(item)">{{ item.lable
        }}</el-tag>
      <div v-show="item.count > 0" class="count">{{ item.count }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue';

const linesOri = new Array(18).fill("").map((item, index) => {
  return { lable: (index + 1) + "号线", lineNo: (index + 1).toString(), trainType: "", count: Math.ceil(Math.random() * 10) - 1 }
})
const lines = reactive(new Array(18).fill("").map((item, index) => {
  return { lable: (index + 1) + "号线", lineNo: (index + 1).toString(), trainType: "", count: Math.ceil(Math.random() * 10) - 1 }
}))
const currentLine = reactive({
  lineNo: "",
  trainType: ""
})
const selectLine = (item: any) => {
  if (item.trainType) {
    currentLine.trainType = item.trainType
    return
  }
  lines.length = 0
  lines.push(...linesOri)
  if (currentLine.lineNo == (item.lineNo)) {
    currentLine.lineNo = ""
    currentLine.trainType = ""
    return
  }

  currentLine.lineNo = (item.lineNo)
  currentLine.trainType = item.trainType
  const temList = lines.splice(0, (item.lineNo))
  let trainType = new Array(3).fill("").map((subItem, index) => {
    return { lable: "0" + ((item.lineNo)) + "A0" + (index + 1), lineNo: ((item.lineNo)).toString(), trainType: "0" + ((item.lineNo)) + "A0" + (index + 1), count: Math.ceil(Math.random() * 10) - 1 }
  })
  lines.unshift(...trainType)
  lines.unshift(...temList)
}
onMounted(() => {
})
// defineProps<{ msg: string }>()
</script>
<style scoped lang="scss">
.allLinePage {
  height: calc(100% - 0px);
  color: #888;
  user-select: none;

  .lineItem {
    display: flex;
    align-items: center;
    padding: 10px 16px 0px 16px;
    justify-content: space-between;

    .el-tag {
      // background-color: #ffffff38;
    }

    .lineTag {
      width: 52px;
      cursor: pointer;
    }

    .count {
      width: 16px;
      height: 16px;
      border-radius: 50px;
      color: white;
      background-color: red;
      line-height: 16px;
      font-size: 14px;
    }
  }
}
</style>
